<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar top="10em" :viewerSource="viewerSource" />
    <div class="tool-box-top-left">
      <!-- <div class="select-box-wrapper"><select-box :options="flyOptions" style="margin-right: 0;" /></div> -->
      <!--      <div class="select-box-wrapper"><a-checkbox v-model:checked="viewModel.translucencyEnabled">translucencyEnabled</a-checkbox></div>
      <div class="select-box-wrapper"><a-checkbox v-model:checked="viewModel.fadeByDistance">fadeByDistance</a-checkbox></div>
      <div class="select-box-wrapper"><a-checkbox v-model:checked="viewModel.showVectorData">showVectorData</a-checkbox></div> -->
      <div class="select-box-wrapper"><SliderBar v-model:value="height" :min="-1000" :max="1000" :step="10">height</SliderBar></div>
    </div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, reactive, watch, toRaw } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import { G3V } from '@g3x';
import { viewerMixin } from '@mixins';
// import merge from '@g3x/utils/merge';

export default defineComponent({
  name: 'church', //
  mixins: [viewerMixin],
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  props: {},
  setup() {
    return {};
  },
  data() {
    return {
      height: 0
    };
  },
  computed: {},
  watch: {},
  methods: {
    g3vOptionsGet(original) {
      // const g3vOptions = merge($g3vOptions, true);
      return original;
    },
    onViewerInited() {
      console.log('church onViewerInited');
    },
    initEffects() {
      const vm = this;
      const { viewer, g3vViewer } = vm;
      const scene = viewer.scene;
      const globe = scene.globe;

      var tileset = new Cesium.Cesium3DTileset({
        url: '//zzgis.com/cdn/3d/3dtiles/16421/tileset.json'
      });

      tileset.readyPromise
        .then(function(tileset) {
          
          scene.primitives.add(tileset);

          // viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
          viewer.scene.camera.setView({
            destination: new Cesium.Cartesian3(4401744.644145314, 225051.41078911052, 4595420.374784433),
            orientation: new Cesium.HeadingPitchRoll(5.646733805039757, -0.276607153839886, 6.281110875400085)
          });

          // Geometry Tiles are experimental and the format is subject to change in the future.
          // For more details, see:
          //    https://github.com/CesiumGS/3d-tiles/tree/vctr/TileFormats/Geometry
          var classificationTileset = new Cesium.Cesium3DTileset({
            url: '//zzgis.com/cdn/3d/SampleData/Cesium3DTiles/Classification/PointCloud/tileset.json',
            classificationType: Cesium.ClassificationType.CESIUM_3D_TILE
          });
          viewer.scene.primitives.add(classificationTileset);

          classificationTileset.style = new Cesium.Cesium3DTileStyle({
            color: {
              conditions: [
                ["${id} === 'roof1'", "color('#004FFF', 0.5)"],
                ["${id} === 'towerBottom1'", "color('#33BB66', 0.5)"],
                ["${id} === 'towerTop1'", "color('#0099AA', 0.5)"],
                ["${id} === 'roof2'", "color('#004FFF', 0.5)"],
                ["${id} === 'tower3'", "color('#FF8833', 0.5)"],
                ["${id} === 'tower4'", "color('#FFAA22', 0.5)"],
                ['true', "color('#FFFF00', 0.5)"]
              ]
            }
          });

          // Information about the currently highlighted feature
          var highlighted = {
            feature: undefined,
            originalColor: new Cesium.Color()
          };

          // Color a feature yellow on hover.
          viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
            // If a feature was previously highlighted, undo the highlight
            if (Cesium.defined(highlighted.feature)) {
              highlighted.feature.color = highlighted.originalColor;
              highlighted.feature = undefined;
            }

            // Pick a new feature
            var pickedFeature = viewer.scene.pick(movement.endPosition);
            if (!Cesium.defined(pickedFeature)) {
              return;
            }

            // Highlight the feature
            highlighted.feature = pickedFeature;
            Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
            pickedFeature.color = Cesium.Color.YELLOW.withAlpha(0.5);
          }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        })
        .otherwise(function(error) {
          console.error(error);
        });

      g3vViewer.hideAllLayers();

      watch(
        () => vm.height,
        height => {
          height = Number(height);
          if (isNaN(height)) {
            return;
          }
          var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
          var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
          var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
          var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
          tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        }
      );
    }
  }
});
</script>

<style lang="less">
.cesium-viewer-wapper {
  .tool-box-top-left {
    min-width: 15em;
  }
}
</style>
